<template>
  <el-container style="width: 90%; margin: 30px auto 0">
    <el-header style="border-bottom: 2px solid #f56c6c">
      <div style="display: flex; width: 100%">
        <el-button style="background-color: #f56c6c; color: white"
          >请输入查询内容</el-button
        >
        <el-input placeholder="请输入内容" style="width: 90%" v-model="neirong"></el-input>
        <el-button type="danger" @click="anniu()"></el-button>
      </div>
    </el-header>
    <el-container>
      <el-aside width="300px">
        <p @click="btn(1)">所有类型的商品</p>
        <div v-for="item in newMenus" :key="item">
          <p
            style="border-bottom: 1px solid black; line-height: 40px"
            @click="btns(item.id)"
          >
            {{ item.type }}
          </p>
          <div style="display: flex; width: 90%; margin: 0 auto">
            <span
              style="text-align: left; font-size: 10px; margin-left: 10px"
              v-for="(item, index) in item.child"
              :key="index"
              @click="btns(item.id)"
              >{{ item.type }}</span
            >
          </div>
        </div>
      </el-aside>
      <el-main>
        <!-- {{dianji}} -->
        <div
          style="
            display: flex;
            width: 49.5%;
            float: left;
            margin-top: -20px;
            height: 250px;
          "
          v-for="(item, index) in dianji"
          :key="index"
        >
          <div style="width: 30%; text-align: center">
            <img
              :src="`${$Imgurl}/api/public/showImg/${item.picture}`"
              style="width: 90%; height: 80%"
            />
          </div>
          <div style="width: 65%">
            <p>{{ item.name }}</p>
            <p>{{ item.author }}</p>
            <p>{{ item.publisher }}</p>
            <p>
              ￥{{ item.price }}
              <el-button type="danger" @click="goumai(item.id)">购买</el-button>
            </p>
          </div>
        </div>
      </el-main>
	  <el-pagination
	    layout="prev, pager, next" 
	    :total="shuju" 
	  	@current-change="btn"
	  ></el-pagination>
    </el-container>
  </el-container>
</template>

<script>
// 拦截器
import instance from "../../ajax/index.js";
export default {
  name: "Detail",
  data() {
    return {
      list1: [],
      newMenus: [],
      //
      dianji: [],
	  // 	请输入内容
	  neirong:'',
	  // 一共多少条内容
	  shuju:0,
    };
  },
  created() {
    this.axios
      .get("/api/public/type/findAll2")
		.then((res) => {
			this.list1 = res.data.data;
			this.getMenu(0, this.newMenus);
		})
		.catch((error) => {
		console.log(error);
		});
		// console.log(this.newMenus);
		this.btn(1);
		// console.log(this.newMenus);
		// this.ddh = this.$route.params.id;
		console.log(this.$route.params.id);
		if(this.$route.params.id == ':id'){
			this.anniu();
		}else{
			this.neirong = this.$route.params.id;
			this.anniu();
		}
  },
  methods: {
    // 递归函数
    getMenu(id, arr) {
      // 判断
      if (id === 0) {
        // 第一级菜单
        this.list1.forEach((item) => {
          if (item.pid === 0) {
            arr.push(item);
          }
        });
        // 在第一级菜单完成之后，从第一级的第一个菜单开始，进入第二季菜单的筛选
        this.getMenu(this.newMenus[0].id, this.newMenus);
      } else {
        // 其他等级的菜单
        // 1.循环等级数组：给每个第一级找到第二级
        arr.forEach((item) => {
          // 2.将list整个循环，将每个第一级找到第二级
          this.list1.forEach((val) => {
            // 判断父级的id === 数据的pid【符合：数据是父级的子级菜单】
            if (item.id === val.pid) {
              // 声明一个下一维度的数组
              if (!item.child) item.child = [];
              // 将符合条件的数据，添加到child下
              item.child.push(val);
            }
          });
          // 每一个等级的36次循环结束之后，重新调用函数，进入下一个等级的操作
          if (item.child) {
            // 终止程序
            this.getMenu(1, item.child);
          }
        });
      }
    },
    btn(id) {
      this.axios
        .get("/api/public/findBookByPage/"+(id-1)+"/8/0")
        .then((res) => {
          this.dianji = res.data.data.books;
		  this.shuju = res.data.data.total+4;
          console.log(res);
        })
        .catch((error) => {
          // console.log(error);
        });
		console.log(id);
    },
	btns(s) {
		console.log(s);
	  this.axios
	    .get("/api/public/findBookByPage/0/8/" + s)
	    .then((res) => {
	      this.dianji = res.data.data.books;
	      console.log(res);
	    })
	    .catch((error) => {
	      // console.log(error);
	    });
	},
	btnss(s){
		console.log(s);
	},
	// 点击购买
	goumai(){
		this.$router.push('/home/cart');
	},
	anniu(){
		let fd = new FormData();
		fd.append('key',this.neirong)
		
		instance
		  .post("/api/public/book/findIf/0/8",fd)
		  .then((res) => {
		    // this.list1 = res.data.data;
		    console.log(res.data.data.books);
			this.dianji = res.data.data.books;
		    // this.getMenu(0, this.newMenus);
		  })
		  .catch((error) => {
		    console.log(error);
		  });
	}
  },
};
</script>

<style scoped>
/*  */
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
